<template>
  <div>
    <div class="application">
<!--      :style="{background: 'url(' + comp.img + ') no-repeat'}"-->
      <button class="app_btn" @click="openApp(comp)" >
<!--        <i :class="comp.img" style="font-size: 3rem"></i>-->
<!--        <el-image :src="require(comp.img)" fit="cover"></el-image>-->
        <el-image :src="comp.img" fit="cover"></el-image>
      </button>
      <span class="app_title">{{ comp.title | formatterTitle}}</span>
    </div>
  </div>
</template>

<script>
import resultComps from "@/components/application";
import SystemApplicationWindows from "@/components/SystemApplicationWindows";
export default {
name: "SystemApplication",
  components: {SystemApplicationWindows},
  props: {
    comp: Object
  },

  data(){
    return{
      resultComps: resultComps,
      btnMouseOver: false,
      defaultCalss: 'app_body_bigger',
      taskList: this.$store.getters.taskList
    }
  },

  created() {
  },


  filters: {
    formatterTitle(data){
      if (data.length > 4){
        data = data.substring(0,4) + '...'
      }
      return data
    }
  },

  methods: {
    openApp(){
      var comp = this.comp;
      comp.isOpen = true
      comp.status = 0

      this.$store.commit('addTaskList', this.comp)
      this.$store.commit('setFocus', this.comp)
    },

    toBack(){
      var comp = this.comp;
      comp.isOpen = false
      comp.status = 2
      var taskList = this.taskList;
      var index = taskList.findIndex(value => value.id === comp.id)
      if (index) taskList.splice(index,1, comp)
    },

    changeWindows(){
      if (this.defaultCalss === 'app_body'){
        this.defaultCalss = 'app_body_bigger'
      }else {
        this.defaultCalss = 'app_body'
      }
    },

    closeWindows(){
      var comp = this.$store.getters.focusApp;
      comp.isOpen = false
      comp.status = 3
      this.$store.commit('removeTaskList', this.comp)
    }
  }
}
</script>

<style scoped>
.application{
  float: left;
  width: 5%;
  /*height: 6rem;*/
  /*border: 1px solid black;*/
  margin-bottom: 1%;
  margin-left: 3%;
}

.app_btn{
  width: 100%;
  height: 80%;
  border-radius: 1rem;
  /*border: 1px solid black;*/
  float: left;
  cursor: pointer;
  background: rgba(255,255,255, .0);
  border: 0;
  /*background: url("../assets/QQ20210311-165757@2x.png") no-repeat;*/
  /*background-size: cover;*/
}

.app_title{
  width: 100%;
  float: left;
  /*border: 1px solid black;*/
  border-radius: 0.5rem;
  background-color: cadetblue;
  font-size: .4rem;
  font-weight: bolder;
  color: white;
}

.app_body{
  width: 100%;
  height: 80%;
  padding: 0 0;
  margin: 0 auto;
  border-radius: 1rem;
  position: relative;
  top: 20%;
  left: 9.9%;
  z-index: 99;
  background: white;
  overflow-y: auto;
  box-shadow: 2px 2px 5px black;
}

.app_body_bigger{
  width: 100%;
  height: 53.5rem;
  padding: 0 0;
  margin: 0 auto;
  border-radius: 1rem;
  position: relative;
  top: 4.3%;
  left: -.1%;
  z-index: 99;
  background: white;
  overflow-y: auto;
}

.intro_title{
  width: 100%;
  background: white;
  /*border: 1px solid black;*/
  z-index: 99;
}

.intro_btn{
  width: 98%;
  /*border: 1px solid black;*/
  overflow: hidden;
  /*border: 1px solid black;*/
  margin: 1% 1%;
}

.intro_close_btn{
  width: 1rem;
  height: 1rem;
  border: .1rem solid black;
  border-radius: 1rem;
  padding: 0 0;
  float: left;
  margin-right: .4rem;
  background-color: #FF7F50; /*珊瑚色*/
}

.intro_task_btn{
  width: 1rem;
  height: 1rem;
  border: .1rem solid black;
  border-radius: 1rem;
  padding: 0 0;
  float: left;
  margin-right: .4rem;
  background: #FFD700; /*金色*/
}

.intro_window_btn{
  width: 1rem;
  height: 1rem;
  border: .1rem solid black;
  border-radius: 1rem;
  padding: 0 0;
  float: left;
  background: #00FF7F; /*薄荷奶绿*/
}
</style>